<template>
  <div class="app-container">
    <el-form :model="searchForm" ref="searchFormRef" inline v-show="showSearch">
      <el-form-item label="授权码" prop="like.license_key" class="w-240px">
        <el-input v-model="searchForm.like.license_key" placeholder="请输入授权码" clearable @keyup.enter="search" />
      </el-form-item>
      <el-form-item label="验证结果" prop="where.validate_result" class="w-200px">
        <el-select v-model="searchForm.where.validate_result" placeholder="请选择" clearable>
          <el-option label="成功" :value="1" />
          <el-option label="失败" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="验证类型" prop="where.validate_type" class="w-200px">
        <el-select v-model="searchForm.where.validate_type" placeholder="请选择" clearable>
          <el-option label="在线验证" value="online" />
          <el-option label="离线验证" value="offline" />
        </el-select>
      </el-form-item>
      <el-form-item label="请求域名" prop="like.request_domain" class="w-200px">
        <el-input v-model="searchForm.like.request_domain" placeholder="请输入请求域名" clearable @keyup.enter="search" />
      </el-form-item>
      <el-form-item label="请求IP" prop="like.request_ip" class="w-180px">
        <el-input v-model="searchForm.like.request_ip" placeholder="请输入请求IP" clearable @keyup.enter="search" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="search">搜索</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="mb-8px w-full">
      <el-button type="success" plain icon="Download" @click="handleExport">导出</el-button>
      <right-toolbar v-model:showSearch="showSearch" @refresh="getList" v-model:columns="columns" />
    </div>

    <el-table v-loading="loading" :data="listData">
      <template v-for="item in columns">
        <el-table-column
          align="center"
          :key="item.key"
          :prop="item.key"
          :label="item.label"
          :show-overflow-tooltip="!!item.overflow"
          :width="item.width"
          v-if="item.show">
          <template v-slot="{ row }">
            <span v-if="item.key === 'validate_result_text'">
              <el-tag v-if="row.validate_result" type="success">成功</el-tag>
              <el-tag v-else type="danger">失败</el-tag>
            </span>
            <span v-else-if="item.key === 'is_abnormal_text'">
              <el-tag v-if="row.is_abnormal" type="warning">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </span>
            <span v-else>{{ row[item.key] }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template v-slot="{ row }">
          <el-button link type="primary" icon="View" @click="handleView(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="page" v-model:limit="limit" @pagination="getList" />

    <!-- 详情对话框 -->
    <el-dialog title="验证日志详情" v-model="detailVisible" width="800px" append-to-body>
      <el-descriptions :column="2" border v-if="detailData">
        <el-descriptions-item label="授权码" :span="2">{{ detailData.license_key }}</el-descriptions-item>
        <el-descriptions-item label="验证类型">
          <el-tag v-if="detailData.validate_type === 'online'" type="primary">在线验证</el-tag>
          <el-tag v-else type="info">离线验证</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="验证结果">
          <el-tag v-if="detailData.validate_result" type="success">成功</el-tag>
          <el-tag v-else type="danger">失败</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="错误码" v-if="!detailData.validate_result">{{ detailData.error_code }}</el-descriptions-item>
        <el-descriptions-item label="错误信息" :span="detailData.validate_result ? 2 : 1" v-if="!detailData.validate_result">
          {{ detailData.error_msg }}
        </el-descriptions-item>
        <el-descriptions-item label="请求域名">{{ detailData.request_domain || '无' }}</el-descriptions-item>
        <el-descriptions-item label="请求IP">{{ detailData.request_ip || '无' }}</el-descriptions-item>
        <el-descriptions-item label="机器码" :span="2">{{ detailData.request_machine_code || '无' }}</el-descriptions-item>
        <el-descriptions-item label="SDK版本">{{ detailData.sdk_version || '无' }}</el-descriptions-item>
        <el-descriptions-item label="产品版本">{{ detailData.product_version || '无' }}</el-descriptions-item>
        <el-descriptions-item label="验证耗时">
          {{ detailData.validate_time ? detailData.validate_time + 'ms' : '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="是否异常">
          <el-tag v-if="detailData.is_abnormal" type="warning">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="User Agent" :span="2">{{ detailData.user_agent || '无' }}</el-descriptions-item>
        <el-descriptions-item label="请求数据" :span="2">
          <el-input v-model="detailData.request_data" type="textarea" :rows="4" readonly />
        </el-descriptions-item>
        <el-descriptions-item label="响应数据" :span="2">
          <el-input v-model="detailData.response_data" type="textarea" :rows="4" readonly />
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">{{ detailData.created_at }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailVisible = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="LogList">
import { listLog, getLog } from '@/api/license/log'

const { proxy } = getCurrentInstance()

const listData = ref([])
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const page = ref(1)
const limit = ref(10)

const searchForm = ref({
  like: {
    license_key: '',
    request_domain: '',
    request_ip: ''
  },
  where: {
    validate_result: '',
    validate_type: ''
  }
})

const columns = ref([
  { key: 'id', label: 'ID', width: 80, show: true },
  { key: 'license_key', label: '授权码', show: true, overflow: true },
  { key: 'validate_type_text', label: '验证类型', width: 100, show: true },
  { key: 'validate_result_text', label: '验证结果', width: 100, show: true },
  { key: 'error_code', label: '错误码', width: 150, show: true },
  { key: 'request_domain', label: '请求域名', width: 180, show: true, overflow: true },
  { key: 'request_ip', label: '请求IP', width: 130, show: true },
  { key: 'is_abnormal_text', label: '是否异常', width: 100, show: true },
  { key: 'created_at', label: '创建时间', width: 180, show: true }
])

const searchFormRef = ref()
const detailVisible = ref(false)
const detailData = ref(null)

/** 查询列表 */
function getList() {
  loading.value = true
  const params = {
    page: page.value,
    limit: limit.value,
    like: searchForm.value.like,
    where: searchForm.value.where
  }
  listLog(params)
    .then(response => {
      listData.value = response.list || []
      total.value = response.page?.total || 0
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

/** 搜索按钮操作 */
function search() {
  page.value = 1
  getList()
}

/** 重置按钮操作 */
function reset() {
  searchFormRef.value?.resetFields()
  search()
}

/** 查看详情 */
function handleView(row) {
  getLog({ id: row.id }).then(res => {
    // 格式化JSON数据显示
    if (res.request_data) {
      try {
        const jsonData = typeof res.request_data === 'string' ? JSON.parse(res.request_data) : res.request_data
        res.request_data = JSON.stringify(jsonData, null, 2)
      } catch (e) {
        // 保持原样
      }
    }
    if (res.response_data) {
      try {
        const jsonData = typeof res.response_data === 'string' ? JSON.parse(res.response_data) : res.response_data
        res.response_data = JSON.stringify(jsonData, null, 2)
      } catch (e) {
        // 保持原样
      }
    }
    detailData.value = res
    detailVisible.value = true
  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.$modal.msgWarning('导出功能开发中...')
}

onMounted(() => {
  getList()
})
</script>
